<template>
  <h1>El-按钮组件</h1>
  <el-button>默认按钮</el-button>
  <el-button type="success" plain>绿色镂空按钮</el-button>
  <el-button type="danger" round>红色胶囊按钮</el-button>
  <el-button type="warning" circle>黄色圆形按钮</el-button>
  <el-button type="primary" disabled>蓝色禁用按钮</el-button>
  <a href="https://www.baidu.com">
    <el-button type="info" link>灰色链接按钮</el-button>
  </a>

    <el-button type="success" disabled>绿色禁用按钮</el-button>

  <el-button :icon="Search" circle />
  <el-button type="primary" :icon="Edit" circle />
  <el-button type="success" :icon="Check" circle />
  <el-button type="info" :icon="Message" circle />
  <el-button type="warning" :icon="Star" circle />
  <el-button type="danger" :icon="Delete" circle />
  <el-icon size="100" style="color: blue;"><Select /></el-icon>
  <el-icon size="100" style="color: red;"><Delete /></el-icon>
  <el-icon size="100" style="color: black;"><Sort /></el-icon>
  <el-icon :size="32" color="#409EFC">
    <DataLine />
  </el-icon>
</template>

<script setup>
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
</script>

<style scoped>

</style>